<template>
  <div class="main">
    <div class="xianchang" @click="topindao(48)">
      <div class="wicon"></div>
      <div class="text">现场播放版</div>
      <div class="lbimg"></div>
    </div>
    <div class="wangluo" @click="topindao(49)">
      <div class="wicon"></div>
      <div class="text">网络播放版</div>
      <div class="lbimg"></div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "home",
  setup(props) {
    const router = useRouter();
    const store = reactive(useStore());
    const { state } = store;
    //加载后获取基本数据
    // store.dispatch('baseData')
    store.dispatch("getDeps");
    store.dispatch("getResources");
    onMounted(() => {
      store.commit('setPlayer',{isPlaying:false})
    })

    const topindao = (e) => {
      let pid = e;
      store.commit("setScene", pid);
      sessionStorage.setItem('scene', e)
      router.push({ name: "pindao",query:{scene:e} });
    };
    watch(state, (currentValue, prevValue) => {});
    return {
      topindao,
    };
  },
};
</script>
<style scoped lang="scss">
.main {
  height: 100%;
  padding: 0;
  margin: 0;
  background: url(../images/bg_index.png) no-repeat center 0 #d81519 fixed;
  background-size: 100%;
  overflow: auto;
  .xianchang {
    width: 326px;
    height: 120px;
    background-image: linear-gradient(to right, #ff8008, #ffc636);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -163px;
    border-radius: 15px;
    box-shadow: 0px 0px 15px #d81518;
    color: white;
    overflow: hidden;
    .wicon {
      background: url(../images/icon_ren.png) no-repeat;
      width: 26px;
      height: 26px;
      background-size: 26px 26px;
      position: absolute;
      left: 100px;
      top: 49px;
    }
    .text {
      position: absolute;
      left: 130px;
      top: 49px;
      font-size: 18px;
    }
    .lbimg {
      background: url(../images/icon_ren.png);
      background-size: 130px 130px;
      position: absolute;
      right: -30px;
      bottom: -30px;
      width: 130px;
      height: 130px;
      opacity: 0.15;
    }
  }
  .wangluo {
    width: 326px;
    height: 120px;
    background-image: linear-gradient(to right, #de255b, #ff7f6f);
    position: absolute;
    left: 50%;
    top: calc(50% + 150px);
    margin-left: -163px;
    border-radius: 15px;
    box-shadow: 0px 0px 15px #d81518;
    color: white;
    overflow: hidden;
    .wicon {
      background: url(../images/icon_diqiu.png) no-repeat;
      width: 26px;
      height: 26px;
      background-size: 26px 26px;
      position: absolute;
      left: 100px;
      top: 49px;
    }
    .text {
      position: absolute;
      left: 130px;
      top: 49px;
      font-size: 18px;
    }
    .lbimg {
      background: url(../images/icon_diqiu.png);
      background-size: 130px 130px;
      position: absolute;
      right: -30px;
      bottom: -30px;
      width: 130px;
      height: 130px;
      opacity: 0.15;
    }
  }
}
</style>
